import { Row } from "components/lib";
import { Card, Button, Table, Space, Image, Switch, Modal } from "antd";
import { useState } from "react";

import { SearchPanel } from "./search-panel";
import { useLabelSearchParams, useLabels, useLabelDel } from "./util";
import { CreateLabel } from "./create-label";
import { useDocumentTitle } from "utils/common";
import { useDebounce } from "utils";
import { Label as LabelType } from "types/label";

const { Column } = Table;

export const Label = () => {
  useDocumentTitle("标签管理");
  const [param, setParam] = useLabelSearchParams();
  const [createLabel, setCreateLabel] = useState(false);
  const [selectedRow, setSelectedRow] = useState<number[]>([]);
  const { data } = useLabels(useDebounce(param, 200));
  const { mutateAsync } = useLabelDel();

  const startAdd = () => {
    setParam({ id: "", title: "" });
    setCreateLabel(true);
  };

  const startDel = (label: LabelType) => {
    Modal.confirm({
      okText: "确定",
      cancelText: "取消",
      title: "确定删除吗?",
      onOk() {
        return mutateAsync({ id: label.id });
      },
    });
  };

  const close = () => {
    setParam({ id: "", title: "" });
    setCreateLabel(false);
  };

  const onSelect = (value: any, selected: boolean) => {
    if (selected) {
      return setSelectedRow([...selectedRow, value.id]);
    }
    setSelectedRow(selectedRow.filter((i) => i !== value.id));
  };

  const onSelectAll = (selected: boolean, rows: LabelType[]) => {
    if (selected) {
      const ids: number[] = [];
      rows.forEach((row) => {
        if (row.id) ids.push(row.id);
      });
      return setSelectedRow([...ids]);
    }

    setSelectedRow([]);
  };

  const rowSelection = {
    selectedRowKeys: selectedRow,
    onSelect,
    onSelectAll,
  };

  const startEdit = (label: LabelType) => {
    setCreateLabel(true);
    setParam({
      ...param,
      id: label.id,
    });
  };

  return (
    <Card>
      <Row between={true} marginBottom={2}>
        <SearchPanel param={param} setParam={setParam} />
        <Button onClick={() => startAdd()} type={"link"}>
          添加标签
        </Button>
      </Row>
      <Table
        dataSource={data}
        rowKey={"id"}
        rowSelection={rowSelection}
        pagination={false}
      >
        <Column title="标题" dataIndex={"title"} key="title" />
        <Column
          title="图片"
          key="img"
          render={(text, record) => (
            <>
              <Image width={100} src={text.img} />
            </>
          )}
        />
        <Column title="排序" dataIndex={"sort"} key="sort" />
        <Column
          title="状态"
          key="status"
          render={(text, record) => (
            <>
              <Switch
                checkedChildren="启用"
                unCheckedChildren="禁用"
                checked={text.status === 1}
              />
            </>
          )}
        />
        <Column title="操作时间" dataIndex={"updated_at"} key="updated_at" />
        <Column
          title="操作"
          key="action"
          render={(text, record) => (
            <Space size={"middle"}>
              <Button type={"link"} onClick={() => startEdit(text)}>
                编辑
              </Button>
              <Button type={"link"} onClick={() => startDel(text)}>
                删除
              </Button>
            </Space>
          )}
        />
      </Table>
      <CreateLabel onClose={() => close()} visible={createLabel} />
    </Card>
  );
};
